<template>
  <div class="addProduct">
    <!-- 面包屑 -->
    <div class="bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/oms/order' }"
          >订单</el-breadcrumb-item
        >
        <el-breadcrumb-item>退货原因详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form-container">
      <!-- 退货商品 -->
      <el-card>
        <div class="goods cardb" v-for="item in returnArr" :key="item.id">
          <div class="title">退货商品</div>
          <el-table
            :data="returnArr"
            :border="true"
            style="width: 100%; margin-top: 15px"
          >
            <el-table-column label="商品图片">
              <img :src="item.productPic" alt="" width="80" />
            </el-table-column>
            <el-table-column
              prop="productName"
              label="商品名称"
              width="160"
            ></el-table-column>
            <el-table-column prop="productId" label="货号" />
            <el-table-column prop="productAttr" label="属性" />
            <el-table-column prop="productCount" label="数量" />
            <el-table-column prop="productRealPrice" label="小计" />
          </el-table>
          <div class="right">
            合计:￥<span style="color: red">{{ item.productRealPrice }}</span>
          </div>
        </div>
      </el-card>

      <!-- 服务单信息 -->
      <el-card style="margin-top: 20px">
        <div class="goods infor" v-for="item in serviceArr" :key="item.id">
          <div class="title">服务单信息</div>
          <div class="cardservice">
            <div data-v-64db1613="" class="formc" style="color: #666">
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  服务单号
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.id }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  申请状态
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.status }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                  style="height: 50px; line-height: 30px"
                >
                  订单编号
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                  style="height: 50px"
                >
                  {{ item.orderSn }}
                  <button
                    data-v-64db1613=""
                    type="button"
                    class="el-button el-button--text el-button--small"
                  >
                    <span @click="onView">查看</span>
                  </button>
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  申请时间
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{
                    item.createTime
                      ? dayjs(item.createTime).format("YYYY-MM-DD HH:mm:ss")
                      : "/"
                  }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  用户账号
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.memberUsername }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  联系人
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.returnName }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  联系电话
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.returnPhone }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  退货原因
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.reason }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  问题描述
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.description }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                  style="height: 100px; line-height: 80px"
                >
                  凭证图片
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                  style="height: 100px"
                >
                  <img
                    data-v-64db1613=""
                    :src="item.productPic"
                    style="width: 80px; height: 80px"
                  />
                </div>
              </div>
            </div>
            <div data-v-64db1613="" class="formc" style="color: #666">
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  订单金额
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  ￥{{ item.productRealPrice }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                  style="height: 52px; line-height: 32px"
                >
                  确认退款金额
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                  style="height: 52px"
                >
                  ￥{{ item.returnAmount }}
                  <div
                    data-v-64db1613=""
                    class="el-input el-input--small is-disabled"
                    style="width: 200px; margin-left: 10px"
                  >
                    <!-- disabled="disabled" -->
                    <input
                      type="text"
                      autocomplete="off"
                      class="el-input__inner"
                    />
                  </div>
                </div>
              </div>
              <div data-v-64db1613="">
                <div data-v-64db1613="" class="el-row">
                  <div
                    data-v-64db1613=""
                    class="form-border form-left-bg font-small el-col el-col-6"
                    style="height: 52px; line-height: 32px"
                  >
                    选择收货点
                  </div>
                  <div
                    data-v-64db1613=""
                    class="form-border font-small el-col el-col-18"
                    style="height: 52px"
                  >
                    <div
                      data-v-64db1613=""
                      class="el-select el-select--small"
                      style="width: 200px"
                    >
                      <div
                        class="el-input el-input--small is-disabled el-input--suffix"
                      >
                        <!-- disabled="disabled"
                          readonly="readonly" -->
                        <input
                          type="text"
                          autocomplete="off"
                          placeholder="请选择"
                          class="el-input__inner"
                        /><span class="el-input__suffix"
                          ><span class="el-input__suffix-inner"
                            ><i
                              class="el-select__caret el-input__icon el-icon-arrow-up"
                            ></i></span
                        ></span>
                      </div>
                      <div
                        class="el-select-dropdown el-popper"
                        style="display: none; min-width: 200px"
                      >
                        <div class="el-scrollbar" style="">
                          <div
                            class="el-select-dropdown__wrap el-scrollbar__wrap"
                            style="margin-bottom: -21px; margin-right: -21px"
                          >
                            <ul
                              class="el-scrollbar__view el-select-dropdown__list"
                            >
                              <li
                                data-v-64db1613=""
                                class="el-select-dropdown__item"
                              >
                                <span>深圳发货点</span>
                              </li>
                              <li
                                data-v-64db1613=""
                                class="el-select-dropdown__item selected"
                              >
                                <span>北京发货点</span>
                              </li>
                              <li
                                data-v-64db1613=""
                                class="el-select-dropdown__item"
                              >
                                <span>南京发货点</span>
                              </li>
                            </ul>
                          </div>
                          <div class="el-scrollbar__bar is-horizontal">
                            <div
                              class="el-scrollbar__thumb"
                              style="transform: translateX(0%)"
                            ></div>
                          </div>
                          <div class="el-scrollbar__bar is-vertical">
                            <div
                              class="el-scrollbar__thumb"
                              style="transform: translateY(0%)"
                            ></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div data-v-64db1613="" class="el-row">
                  <div
                    data-v-64db1613=""
                    class="form-border form-left-bg font-small el-col el-col-6"
                  >
                    收货人姓名
                  </div>
                  <div
                    data-v-64db1613=""
                    class="form-border font-small el-col el-col-18"
                  >
                    {{ item.returnName }}
                  </div>
                </div>
                <div data-v-64db1613="" class="el-row">
                  <div
                    data-v-64db1613=""
                    class="form-border form-left-bg font-small el-col el-col-6"
                  >
                    所在区域
                  </div>
                  <div
                    data-v-64db1613=""
                    class="form-border font-small el-col el-col-18"
                  >
                    {{ item.companyAddress.province }}
                    {{ item.companyAddress.region }}
                  </div>
                </div>
                <div data-v-64db1613="" class="el-row">
                  <div
                    data-v-64db1613=""
                    class="form-border form-left-bg font-small el-col el-col-6"
                  >
                    详细地址
                  </div>
                  <div
                    data-v-64db1613=""
                    class="form-border font-small el-col el-col-18"
                  >
                    {{ item.companyAddress.detailAddress }}
                  </div>
                </div>
                <div data-v-64db1613="" class="el-row">
                  <div
                    data-v-64db1613=""
                    class="form-border form-left-bg font-small el-col el-col-6"
                  >
                    联系电话
                  </div>
                  <div
                    data-v-64db1613=""
                    class="form-border font-small el-col el-col-18"
                  >
                    {{ item.companyAddress.phone }}
                  </div>
                </div>
              </div>
            </div>
            <div data-v-64db1613="" class="formc" style="color: #666">
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  处理人员
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.receiveMan }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  处理时间
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{
                    item.handleTime
                      ? dayjs(item.handleTime).format("YYYY-MM-DD HH:mm:ss")
                      : "/"
                  }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  处理备注
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.handleNote }}
                </div>
              </div>
            </div>
            <div data-v-64db1613="" class="formc" style="color: #666">
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  收货人员
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.receiveMan }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  收货时间
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.receiveTime }}
                </div>
              </div>
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                >
                  收货备注
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  {{ item.receiveNote }}
                </div>
              </div>
            </div>
            <div
              data-v-64db1613=""
              class="formc"
              style="display: none; color: #666"
            >
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                  style="height: 52px; line-height: 32px"
                >
                  处理备注
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  <div
                    data-v-64db1613=""
                    class="el-input el-input--small"
                    style="width: 200px; margin-left: 10px"
                  >
                    <input
                      type="text"
                      autocomplete="off"
                      class="el-input__inner"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              data-v-64db1613=""
              class="formc"
              style="display: none; color: #666"
            >
              <div data-v-64db1613="" class="el-row">
                <div
                  data-v-64db1613=""
                  class="form-border form-left-bg font-small el-col el-col-6"
                  style="height: 52px; line-height: 32px"
                >
                  收货备注
                </div>
                <div
                  data-v-64db1613=""
                  class="form-border font-small el-col el-col-18"
                >
                  <div
                    data-v-64db1613=""
                    class="el-input el-input--small"
                    style="width: 200px; margin-left: 10px"
                  >
                    <input
                      type="text"
                      autocomplete="off"
                      class="el-input__inner"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div
              data-v-64db1613=""
              style="margin-top: 15px; text-align: center; display: none"
            >
              <button
                data-v-64db1613=""
                type="button"
                class="el-button el-button--primary el-button--small"
              >
                <span>确认退货</span></button
              ><button
                data-v-64db1613=""
                type="button"
                class="el-button el-button--danger el-button--small"
              >
                <span>拒绝退货</span>
              </button>
            </div>
            <div
              data-v-64db1613=""
              style="margin-top: 15px; text-align: center; display: none"
            >
              <button
                data-v-64db1613=""
                type="button"
                class="el-button el-button--primary el-button--small"
              >
                <span>确认收货</span>
              </button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { Ref } from "vue";
import * as api from "../../request/api";
import { useRoute } from "vue-router";
import router from "../../router";
import dayjs from "dayjs";
import type { IreturnDetailPromise } from "../../request/OmsorderApply/index";

//退货原因详情
const route = useRoute();
// 接收参数id
// let id = route.query.id;
let id = ref(route.query.id) as Ref<string | number>;
// console.log(id.value);

let returnArr = ref([]) as Ref<IreturnDetailPromise[]>; //退货商品数组
let serviceArr = ref([]) as Ref<IreturnDetailPromise[]>; //服务单信息数组
// 接收数据
let ReceivedData = async () => {
  let detailData = await api.returnApply.returnDetail(id.value);
  console.log(detailData);
  returnArr.value.push(detailData);
  serviceArr.value.push(detailData);
};
ReceivedData();
// 获取的详情数据
console.log(returnArr);

// 查看
let onView = () => {
  // 接收参数id
  let data = route.query.id;
  router.push({
    path: "/oms/orderDetail",
    // 注意：是returnArr.value[0].orderId不是id
    query: { id: returnArr.value[0].orderId },
  });
};
</script>

<style lang="scss" scoped>
.addProduct {
  background-color: white;
  height: 106vh !important;
}

.form-left-bg[data-v-64db1613] {
  background: #f2f6fc;
}

.form-border[data-v-64db1613] {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
}

.formc[data-v-64db1613] {
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
  margin-top: 15px;
}

.title {
  font-size: 16px;
}

.cardb {
  position: relative;
  height: 170px;
}
.right {
  font-size: 16px;
  margin-top: 10px;
  right: 0;
  position: absolute;
  height: 30px;
  line-height: 30px;
}
.goods {
  padding: 0;
}

.el-input,
.textarea {
  width: 340px;
}

.form-container {
  left: 0;
  right: 0;
  // width: 720px;
  padding: 27px 35px 15px 35px;
  margin: 40px auto;
  width: 90%;
}

.addProduct {
  background-color: white;
  height: 100vh;
}
</style>
